<template>
	<uni-popup ref="popupImg" background-color="#fff">
		<view class="popup-content">
			<img :src="img" alt="" style="width: 100%;" @click="hiddenPopup">
		</view>
	</uni-popup>
</template>

<script lang="ts">
	import {
		defineComponent,
		ref,
		onMounted,
		nextTick,
		watch
	} from 'vue'
	export default defineComponent({
		props: {
			imgUrl: {
				type: String,
			},
			imgFlag: {
				type: Boolean
			}
		},
		setup(props, {
			emit
		}) {
			const popupImg = ref(null)
			const img = ref('')

			watch(() => props.imgUrl, (newValue) => {
				img.value = newValue
				
			})
			watch(() => props.imgFlag, (newValue) => {
				popupImg.value.open('center')
			})
			const hiddenPopup = () => {
				popupImg.value.close()
			}

			return {
				img,
				popupImg,
				hiddenPopup
			}

		}
	})



	// change(e) {
	// 	console.log('当前模式：' + e.type + ',状态：' + e.show);
	// },
</script>

<style lang="scss">
	.popup-content {

		padding: 0;

	}

	:deep(.uni-popup__wrapper) {
		width: 100%;
	}

	:deep(view[name='content']) {
		background-color: #000;
	}
</style>
